const autoprefixer = require("autoprefixer");
const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  corePlugins: {
    divideWidth: true
  },
  theme: {
    container: {
      center: true
    },
    screens: {
      sm: '728px',
      md: '1024px',
      lg: '1280px',
      xl: '1367px',
      '2xl': '1536px',
      '3xl': '1921px'
    },
    fontFamily: {
      'regular': ['PingFangSC-Regular', 'PingFang SC'],
      'semibold': ['PingFangSC-Semibold', 'PingFang SC'],
      'medium-family': ['PingFangSC-Medium', 'PingFang SC'],
    },
    fontSize: {
      xxs: ['0.5rem', { lineHeight: '0.75' }],
      xs2: ['0.685rem', { lineHeight: '0.75' }],
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '0.75xl': ['0.75rem', { lineHeight: '1' }],
      '0.875xl': ['0.875rem', { lineHeight: '1' }],
      '1xl': ['1rem', { lineHeight: '1' }],
      '1.125xl': ['1.125rem', { lineHeight: '1' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '2-5xl': ['1.7rem', { lineHeight: '2.125rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      'semi-5xl': ['2.5rem', { lineHeight: '2.75rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      'r1.25': ['1.25rem', { lineHeight: '1.75rem' }],
      'r1.3': ['1.3rem', { lineHeight: '1.8rem' }],
      'r1.4': ['1.4rem', { lineHeight: '1.9rem' }],
      'r1.5': ['1.5rem', { lineHeight: '2rem' }],
      'r1.6': ['1.6rem', { lineHeight: '2.1rem' }],
      'r1.7': ['1.7em', { lineHeight: '2.2rem' }],
      'r1.8': ['1.8rem', { lineHeight: '2.3rem' }],
      'r2.0': ['2.0rem', { lineHeight: '2.4rem' }],
      'r2.2': ['2.2rem', { lineHeight: '2.5rem' }],
    },
    maxWidth: (theme, { breakpoints }) => ({
      none: 'none',
      0: '0rem',
      xs: '20rem',
      sm: '24rem',
      'semi-sm': '26rem',
      md: '28rem',
      lg: '32rem',
      xl: '36rem',
      '2xl': '42rem',
      '3xl': '48rem',
      '4xl': '56rem',
      '5xl': '64rem',
      '6xl': '72rem',
      '7xl': '80rem',
      full: '100%',
      min: 'min-content',
      max: 'max-content',
      prose: '65ch',
      ...breakpoints(theme('screens')),
    }),
    minWidth: {
      '3': '3rem',
      '4': '4rem'
    },
    zIndex: {
      auto: 'auto',
      0: '0',
      10: '10',
      20: '20',
      30: '30',
      40: '40',
      50: '50',
      100: '100',
      999: '999',
      1000: '1000',
      1001: '1001',
      2000: '2000',
      2001: '2001',
      9999: '9999'
    },
    colors: {
      primary: {
        lighter: "#EBEDF3",
        light: "#FCEEEC",
        DEFAULT: "#E55A48",
        dark: "#91431F",
        bluelight: '#277DFF',
        bluedark: '#3D7FFF'
      },
      gray: {
        50: '#f8f8f8',
        80: '#EFF2F4',
        100: '#E7E9EC',
        120: '#F8F8F8',
        150: '#F5F5F5',
        200: '#8E959E',
        250: '#656A72',
        300: '#5D646E',
        320: '#666666',
        350: '#333333',
        400: '#373D46',
        500: '#212832',
        600: '#2C2E47',
        700: '#797A82',
        '4D4E58': '#4D4E58',
        '6d6d6d': '#6D6D6D',
        'b4b4b4': '#B4B4B4',
        'CACACD': '#CACACD',
        '20222E': '#20222E',
        'D8D8D8': '#D8D8D8',
        'f5f5f5': '#f5f5f5'
      },
      white: {
        DEFAULT: '#ffffff',
        hover: '#898989',
        active: '#595959'
      },
      orange: {
        ...colors.orange,
        300: '#FFB727',
        400: '#F5A623',
        500: '#ffff00'
      },
      blue: {
        ...colors.blue,
        150: '#E7F1FF',
        350: '#397CCA',
        600: '#001529',
        450: '#277DFF',
      },
      red: {
        ...colors.red,

        600: '#E55A48',
        650: '#FF3627',
        700: '#E33B25',
        800: '#ff3300',
        'fdf4f3':'#fdf4f3',
      },
      green: {
        ...colors.green,
        300: '#86DA64',
        200: '#6DE040'
      },
      black: {
        DEFAULT: '#000000',
        230: '#1F2123'
      }
    },
    extend: {
      width: {
        '4.5': '1.125rem',
        'r1.875':'1.874rem',
        'r2.125':'2.125rem',
        'r23.625':'23.625rem',
        'r1/10':'10%',
        '50': '12.5rem',
        'r2.3': '2.3rem',
        'r2.85': '2.85rem',
        'r3': '3rem',
        'r3.6': '3.6rem',
        'r4': '4rem',
        'r4.5': '4.5rem',
        'r5': '5rem',
        'r5.375': '5.375rem',
        'r6': '6rem',
        'r7': '7rem',
        'r7.25': '7.25rem',
        'r8': '8rem',
        'r9': '9rem',
        'r9.25': '9.25rem',
        'r9.45': '9.45rem',
        'r9.9375': '9.9375rem',
        'r10': '10rem',
        'r11': '11rem',
        'r11.375': '11.375rem',
        'r12': '12rem',
        'r17': '17rem',
        'r20': '20rem',
        'r23': '23rem',
        'r27': '27rem',
        'r30': '30rem',
        'r33': '33rem',
        'r37.5': '37.5rem',
        'r40': '40rem',
        'r50': '50rem',
        'r55': '55rem',
        'r60': '60rem',
        'r94.5': '94.5rem',
        'r2%': '200%'
      },
      height: {
        '4.5': '1.125rem',
        'r1.875': '1.875rem',
        'r2.125':'2.125rem',
        'r2.85': '2.85rem',
        'r2.6': '2.6rem',
        'r2.3': '2.3rem',
        'r3': '3rem',
        'r3.5': '3.5rem',
        'r4': '4rem',
        'r4.2': '4.2rem',
        'r5': '5rem',
        'r4.8': '4.8rem',
        'r6': '6rem',
        'r6.3': '6.3rem',
        'r7': '7rem',
        'r7.25': '7.25rem',
        'r8': '8rem',
        'r9': '9rem',
        'r10': '10rem',
        'r16': '16rem',
        'r20': '20rem',
        'r26': '26rem',
        'r28.5': '28.5rem',
        'r30': '30rem',
        'r33': '33rem',
        'r37.5': '37.5rem',
        'r40': '40rem',
        'r50': '50rem',
        'r55': '55rem',
        'r60': '60rem',
        'v60': '60vh',
        'v70': '70vh',
        'v85': '85vh',
      },
      borderRadius: {
        'r8.5': '8.5rem',
        'r11.5': '11.5rem',
        'r14.25': '14.25rem'
      },
      lineHeight: {
        'r1.5': '1.5rem',
        'r1.875':'1.875rem',
        'r2': '2rem',
        'r2.2': '2.2rem',
        'r2.4': '2.4rem',
        'r2.6': '2.6rem',
        'r2.85': '2.85rem',
        'r3': '3rem',
        'r4': '4rem',
        'r5': '5rem',
        'r6': '6rem',
        'r7': '7rem',
        'r8': '8rem',
        'r9': '9rem',

      }
    },
    flex: {
      '1': '1 1 0%',
      '1.25': '1 1 12.5%',
      auto: '1 1 auto',
      initial: '0 1 auto',
      inherit: 'inherit',
      none: 'none', 
    },
    boxShadow: {
      'bs2':'2px 2px 6px 0 hsl(0deg 0% 80% / 50%)',
      'bs3': '0px 2px 10px 0px rgba(32,34,46,0.04)',
      'bs4': '0px 2px 8px 0px rgba(32,34,46,0.04)'
    }
  },
  variants: {
    extend: {
      textColor: ['active'],
    },
  },
  plugins: []
}
